// -------------------------------------------
// Position utilities & helper class
// -------------------------------------------

// .pos-BREAKPOINT-POSTION repsonive utils
@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
    @each $prop in (absolute, relative, static, fixed) {
      .pos#{$infix}-#{$prop} {
        position: #{$prop} !important;
        
        @if $prop == relative {
          overflow: hidden;
        }
      }
    }
    
    .pos#{$infix}-t {
      top: 0 !important;
    }
    .pos#{$infix}-b {
      top: auto !important;
      bottom: 0 !important;
    }
    .pos#{$infix}-l {
      left: 0 !important; 
    }
    .pos#{$infix}-r {
      left: auto !important;
      right: 0 !important;
    }

    .pos#{$infix}-x {
      left: 0 !important;
      right: 0 !important;
    }
    .pos#{$infix}-y {
      top: 0 !important;
      bottom: 0 !important;
    }
    .pos#{$infix}-a {
      left: 0 !important;
      right: 0 !important;
      top: 0 !important;
      bottom: 0 !important;      
    }
    
    .pos#{$infix}-vcenter {
      top: 50% !important;
      transform: perspective(1px) translateY(-50%);
    }
    
    .pos#{$infix}-t-auto {
      top: auto !important;
    }
    .pos#{$infix}-b-auto {
      bottom: auto !important;
    }
    .pos#{$infix}-l-auto {
      left: auto !important; 
    }
    .pos#{$infix}-r-auto {
      right: auto !important;
    }
    
    // Percentages
    // 1-10
    @for $i from 1 through 10 {
      $s: $i;
      .pos#{$infix}-t-#{$s} {
        top: #{$s}% !important;
      }
      .pos#{$infix}-b-#{$s} {
        bottom: #{$s}% !important;
      }
      .pos#{$infix}-l-#{$s} {
        left: #{$s}% !important;
      }
      .pos#{$infix}-r-#{$s} {
        right: #{$s}% !important;
      }      
    }
    // 10-100
    @for $i from 1 through 10 {
      $s: $i * 10;
      .pos#{$infix}-t-#{$s} {
        top: #{$s}% !important;
      }
      .pos#{$infix}-b-#{$s} {
        bottom: #{$s}% !important;
      }
      .pos#{$infix}-l-#{$s} {
        left: #{$s}% !important;
      }
      .pos#{$infix}-r-#{$s} {
        right: #{$s}% !important;
      }      
    }
  }
}

// z-index: 1-10
@for $i from 1 through 10 {
  .pos-zindex-#{$i} {
    z-index: $i !important;
  }
}

// z-index: 15-100
@for $i from 3 through 20 {
  $s: $i * 5;
  .pos-zindex-#{$s} {
    z-index: $s !important;
  }
}

.pos-zindex-dropdown {
  z-index: $zindex-dropdown+1 !important;
}
.pos-zindex-fixed {
  z-index: $zindex-fixed+1 !important;
}